<template>
	<view class="an-body an-user">
		<view class="an-top-bg" style="background: #fbf9fe">
			<nodata v-if="grids.length==0"></nodata>
			<!-- 用户信息 -->
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
			<view class="an-userInfo p5" v-for="item in grids">
				<view class="an-user-image m10"><image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="aspectFit" :src="item.vister_headimgurl?item.vister_headimgurl:'../../static/img/user.png'" @error="imageError"></image></view>
				<view class="an-user-text w20">
					<view  style="color: black;">
						<h3>{{item.vister_name}} </h3>
						<p>访客电话：</p>
						<p>到访公司：</p>
						<p>受访部门：</p>
						<!-- <p>受访人：</p> -->
						<p>到访时间：</p>
						<p>受访位置：</p>
					</view>
					
				</view>
				<view class="cc-view pL10"> 
					<button :class="item.status==0?'cc':'bg_8e8e col_black mR10'">{{checkappstatus(item)}}</button>
					<view class="phone-number">
						{{item.vister_mobile?item.vister_mobile:'-'}}
					</view>
					<view class="host-company">
						{{item.vister_company_name?item.vister_company_name:'-'}}
					</view>
					<view class="host-department">
						{{item.app_dept_name?item.app_dept_name:'暂无'}}
					</view>
					<!-- <view class="interviewee">
						李晓东
					</view> -->
					<view class="ontime">
						<!-- {{item.visittime}} -->
						{{retime(item.app_visittime)}}
					</view>
					<view class="location-visited">
						{{item.app_address}}
					</view>
					<view class="details " @click="details(item)">
						查看详情
					</view>
				</view>
				
			</view>
			</mescroll-uni>
			
		</view>

		<backnext></backnext>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot } from '@/common/util.js';
import defaultImg from '@/static/img/userImg.jpg';
//import {usergetlist} from "@/common/api/user.js"
import {arriveararrived} from '@/common/api/appointment.js'
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {timestampToTime} from "@/common/common.js"
export default {
	mixins: [MescrollMixin], // 使用mixin
	computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userInfo'])
	},
	data() {
		return {
			userSrc: defaultImg,
			grids: [],
			page:1,
			pageSize:10,
			requestchanger:true,
			downOption:{
				auto: false
			},
			upOption:{
				auto:false
			},
			userinfo:{},
			offset:0,
			length:10,
			count:0,
			companyid:''
		};
	},
	onLoad(event) {
		this.userSrc = hostRoot + 'uploads/' + this.userInfo.photoUrl;
		this.companyid = event.companyid
		uni.getStorage({
			key: 'userinfo',
			success: res => {
				this.userinfo = res.data
				console.log(res);
			}
		});
		this.ladingdata();
	},
	onShow() {
	},
	methods: {
		/*检验访问状态*/
		checkappstatus(item){
			if(item.appointment_status == 1){ return '已访问'}
			switch(item.arrive_status) {
			     case 1:
				 case 2:
				 case 3:
			        return '访问中'
			        break;
			     case 4:
				 case 5:
			        return '已访问'
			        break;
			     default:
			        return '未访问'
			} 
			
		},
		retime(val){
			return timestampToTime(val)
		},
		/*下拉刷新的回调*/
			downCallback(){
				this.page=1;
				if(this.count == this.grids.length){
					this.requestchanger = false
					this.mescroll.endSuccess()
					return
				}
				this.ladingdata();		
			
			},
		/*上拉加载的回调*/
			upCallback(page) {
				console.log(page)
				this.mescroll.endSuccess(this.grids.length, this.requestchanger);
				this.page++;
				this.ladingdata();	
			// 与 mescroll-body 的处理方式一致 > 
			},
		ladingdata(){
			console.log(1)
			/*接口---------------------------2020年8月11日11:36:20*/ 
			/*获取保安访客列表*/
			arriveararrived({
				companyid:this.companyid,
				offset:this.offset,
				length:this.length
			}).then(res=>{
				
				if(res.data.code==400){
					this.requestchanger = false
					return
					}	
				console.log(res)
				if(res.data.data){
					var newResult=res.data.data
					this.offset = res.data.data.length
					this.count = res.data.count
					// this.getlist=res.data.data;
					this.mescroll.endSuccess();
					 if (newResult.length == 0 || newResult.length < 10) {
						 this.allLoaded = true;
					 }
					 if (this.page != 1) {
						 newResult = this.getlist.concat(newResult);
					 }
					 for (let i = 0; i < newResult.length; i++) {
					 	this.grids.push(newResult[i])
					 }
					 this.offset = this.grids.length
					 // this.grids = newResult;
				 }
				
			})

		},
		details(item){
			if(this.userinfo.roleid == 6 || this.userinfo.roleid == 5){

				uni.navigateTo({
					url: '../securityguard/useraudit?meetingid='+item.id
				});
				
				return 
			}

			if(item.auditing == 0 ){
				var stype = 3
			}else{
				var stype = 2
			}
			let detail = {
				/*邀请id-showtype=审核---appinfo--邀请信息*/
				id: item.appointmentid,
				showtype:stype,
				appinfo:item
			};
			uni.navigateTo({
				url: './recordDetails?detaildata=' + encodeURIComponent(JSON.stringify(detail))
			});
		},
		...mapMutations(['logout']),
		clickBtn(id) {
			let url = '';
			switch (id) {
				case 1:
					url = '../yaoqing/yaoqing';
					break;
				case 2:
					url = '../message/messageList/messageList';
					break;
				case 3:
					url = '../sign/sign';
					break;
				case 4:
					url = '../user/userList';
					break;
				default:
					url = '../main/main';
			}
			uni.navigateTo({
				url: url
			});
		},
		editPwd() {
			// 修改密码
			uni.navigateTo({
				url: '../pwd/pwd'
			});
		},
		bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			uni.reLaunch({
				url: '../login/login'
			});
		},
		imageError(e) {
			this.userSrc = defaultImg;
		}
	}
};
</script>

<style lang="scss">
.an-user {
	.an-quick {
		display: flex;
		flex-direction: row;

		padding: 15px 15px;
		.an-ico-item {
			width: 25%;
			text-align: center;
			.an-ico-img {
				text-align: center;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				border-radius: 50%;
				color: #ffffff;
				.iconfont {
					font-size: 21px;
				}
				&.color1 {
					//background-color: #e9f4fd;
					background: linear-gradient(#bb51fb, #883ffe);
				}
				&.color2 {
					background: linear-gradient(#f9ac8e, #ec5e5c);
				}
				&.color3 {
					background: linear-gradient(#78f5b1, #34ce78);
				}
				&.color4 {
					background: linear-gradient(#68aefb, #007aff);
				}
			}
		}
	}
	.an-list {
		.an-ico {
			margin-right: 10px;
			.iconfont {
				font-size: 21px;
			}
			&.color1 {
				color: #ec5e5c;
			}
			&.color2 {
				color: #883ffe;
			}
			&.color3 {
				color: #34ce78;
			}
			&.color4 {
				color: #007aff;
			}
		}
	}
}
.uni-list-cell-divider{
	    background-color: white;
}
.an-top-bg{
	height: auto;
	padding: 0px 0px 0px 0px;
	margin-left: 10px;
	
}
	
uni-button{
	width: 80px;
	height: 30px;
	font-size: 15px;
	line-height: 30px;
	// color: white;
}
.cc{
	// background: #007aff;
	// color: #000;
	margin-right: 0px;
}
.an-userInfo{
	background: white;
	margin-top: 10px;
}
.an-user-image{
	margin-left: 10px;
	margin-top: 5px;
}
.an-user-text{
	margin-top: 5px;
}
.cc-view{
	text-align: right;
	margin-top: 5px;
	color: #000;
	width: 60%;
}
.details{
	width: 77px;
		height: 30px;
		color: #fff;
		background-color: #007aff;
		border-radius: 18px;
		font-size: 15px;
		line-height: 30px;
		text-align: center;
		margin-left: auto;
		margin-top: 5px;
		margin-bottom: 5px;
}
</style>